.login_bg {
  background: url("/static/img/login_bg.png") no-repeat left;
  background-size: auto 100%;
  position: relative;
  width: 100%;
  height: 100%;
  .login {
    background: url("/static/img/login_card.png") no-repeat center;
    background-size: 804px 463px;
    width: 804px;
    height: 463px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    text-align: center;
    & > img {
      position: absolute;
      left: 120px;
    }
    .img01 {
      width: 136px;
      height: 38.5px;
      top: 50px;
    }
    .img02 {
      width: 227px;
      height: 196px;
      top: 140px;
      left: 140px;
    }
    .box {
      position: absolute;
      left: 240px;
      right: 120px;
      top: 110px;
      bottom: 90px;
      padding-left: 200px;
      .code {
        width: 250px;
        height: 250px;
        cursor: pointer;
      }
      .title {
        font-size: 18px;
        color: #35A4F9;
        text-align: center;
        position: relative;
        & > div {
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: rgba(53, 164, 249, .7);
        }
        &:after {
          display: inline-block;
          content: '';
          border-bottom: 2px solid #2CA2FC;
          width: 24px;
          position: absolute;
          bottom: 0;
          transform: translateX(-50%);
        }
      }
      .el-form {
        padding-top: 40px;
        .el-button {
          width: 80%;
          border-radius: 18px;
        }
      }
      .el-form-item.is-error {
        .el-input__inner {
          border-color: #ff4949;
        }
        .el-input__icon {
          color: #ff4949;
        }
      }
      .el-input {
        .el-input__icon {
          left: 0;
          font-size: 24px;
          margin: 0;
          position: absolute;
          top: 0;
        }
        .el-input__inner {
          padding-left: 35px;
          padding-right: 0;
          border-radius: 0;
          border: none;
          background: none;
          border-bottom: 1px solid #D1DAE5;
          &:hover {
            border-color: #8391a5;
          }
          &:focus {
            outline: 0;
            border-color: #4baefa;
          }
          &:hover + .el-input__icon {
            color: #8391a5;
          }
          &:focus + .el-input__icon {
            color: #4baefa;
          }
        }
      }
    }
  }
}

.fade-enter-active, .fade-leave-active {
  transition: all .5s ease;
}

.fade-enter, .fade-leave-to {
  transform: translate(-50%, -50%) scale(.1);
  opacity: 0;
}
